<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file1"><br>
    <button>提交图片</button>
    <img src="" alt="" width="700px" height="500px">


    <script>
        const file1Obj = document.querySelector("#file1")
        const btnObj = document.querySelector("button")
        const imgObj = document.querySelector("img")
        const request = new XMLHttpRequest();
        
        btnObj.addEventListener("click",function(){
            if(file1Obj.files.length<=0){
               return alert("请选择图片")
            }
            const formdata = new FormData();

            //将图片添加到file1Obj中
            formdata.append("files",file1Obj.files[0])

            request.open("POST","http://www.biwuit.cn/spboot/upload")
            request.send(formdata)

            request.onreadystatechange = function(){
                if(request.status==200&&request.readyState==4){
                    console.log(request.responseText)

                    const responValue = JSON.parse(request.responseText)

                    if(responValue.msg=="文件上传成功"){
                        imgObj.src = "http://www.biwuit.cn/spboot/uploads/"+responValue.fileName;
                    }

                }
            }
        })

    </script>
</body>
</html>